<template>
  <div class="step1-container">
    <div class="title">
      Start typing or search for your bank beloew
    </div>

    <Promised :promise="institutionsAsync">
      <template v-slot:pending>
        <a-skeleton
          :paragraph="{
            rows: 10
          }"
          active
        />
      </template>
      <template v-slot>
        <div class="institutions-select-container">
          <div class="form-container">
            <a-input-search
              placeholder="Please enter financial institution"
              enter-button="Search"
              size="large"
              @change="(e) => onSearch(e.target.value)"
              @search="onSearch"
            />
          </div>

          <div class="institutions-container">
            <div
              v-for="item in searchData"
              :key="item.id"
              class="institution-container"
              :title="item.shortName"
              @click="handlerInstitution(item)"
            >
              <img
                class="img"
                :src="item.logo.links.full"
                alt=""
              >
              <!-- <div class="name">{{ item.shortName }}</div> -->
            </div>
          </div>
        </div>
      </template>
      <template v-slot:rejected="error">
        <p>Error: {{ error }}</p>
      </template>
    </Promised>

    <a-divider />

    <div class="tips-container">
      <div class="title">
        TIPS:
      </div>

      <div class="infos-container">
        <div>
          we are secure,bank-leve technology to retrieve a read-only copy of your  bank .statement so we can:prvide insiant access to your wage;
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBasiqInstitutions, getBasiqUser } from '@/api/risk/basiq';
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      // 机构列表
      institutions: [],

      searchData: [],

      institutionsAsync: null
    };
  },

  created() {
    this.institutionsAsync = this.getBasiqInstitutions();
  },

  computed: {
    ...mapGetters(['currentUser'])
  },

  methods: {
    getBasiqUser() {
      return new Promise((resolve, reject) => {
        const {
          email,
          mobile,
          first_name: firstName,
          last_name: lastName
        } = this.currentUser;
        const data = {
          email,
          mobile: `+61${mobile}`,
          firstName,
          lastName
        };
        getBasiqUser(data)
          .then((data) => {
            resolve(data);
          })
          .catch((error) => {
            reject(data);
          });
      });
    },

    // selectBank
    handlerInstitution(institution) {
      this.$emit('institution', institution);

      setTimeout(() => {
        this.$emit('nextStep', institution);
      }, 300);
    },

    // onSearch
    onSearch(value) {
      const searchData = this.institutions.filter((product) =>
        // 每一项数据
        // console.log(product)
         Object.keys(product).some((key) =>
          // 每一项数据的参数名
          // console.log(key)
           (
            String(product[key])
              // toLowerCase() 方法用于把字符串转换为小写。
              .toLowerCase()
              // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
              .indexOf(value) > -1
          )));

      this.searchData = searchData.length ? searchData : this.institutions;
    },

    // getBasiqInstitutions
    getBasiqInstitutions() {
      return new Promise((resolve, reject) => {
        this.getBasiqUser()
          .then(() => {
            getBasiqInstitutions()
            .then((res) => {
              this.searchData = res.data;
              this.institutions = res.data;
              resolve(res);
            })
            .catch(((error) => {
              reject(error);
            }));
          })
          .catch((error) => {
            reject(error);
          });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.step1-container {
  & > .title {
    text-align: center;
    font-size: $font-size-lg;
    font-weight: bold;
  }

  .institutions-select-container {
    max-width: 780px;
    margin: 0 auto;
    .form-container {
      margin: $margin-sm 0;
    }

    .institutions-container {
      display: flex;
      flex-wrap: wrap;

      max-height: 300px;
      overflow-y: auto;

      .institution-container {
        width: 94px;
        height: 94px;
        border: 1px $gray-10 solid;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 5px;

        .img {
          width: 84px;
        }
      }
    }
  }
  .tips-container {
    max-width: 780px;
    margin: 0 auto;

    color: $gray-11;
    .title {
      font-weight: bold;
    }
    .infos-container {
      div {
        line-height: 1.2em;
      }
    }
  }
}
</style>
